<template>
  <div class="article-item">
    <template v-if="item.type === 'special'" >
      <div class="aui-card-list" @click="toDetail(item)">
        <div class="aui-card-list-header aui-card-list-user">
          <div class="aui-card-list-user-avatar">
            <img
              src="http://demo.sucaihuo.com/modals/36/3619/demo/themes/img/ad/f-n0.jpg"
              class="aui-img-round"
            />
          </div>
          <div class="aui-card-list-user-name">
            <div class="aui-text-info">{{item.author}}</div>
            <div class="aui-font-size-12 text-light">{{item.category}}</div>
          </div>
          <div class="aui-card-list-user-info text-light">{{item.created_at}}</div>
        </div>
        <div class="aui-card-list-content-padded aui-padded-t-5 aui-padded-b-5">
         
        </div>
        <div class="aui-card-list-content" style="padding: 0 10px">
          <div class="aui-row aui-row-padded">
            <div class="aui-col-xs-12">
              <img v-for="img in item.images" :src="img" v-lazy="img" :key="img">
              
            </div>
          </div>
        </div>
        <div class="aui-card-list-footer text-light size-color">
          <div><i class="aui-iconfont aui-icon-display"></i> {{item.display}}</div>
          <div><i class="aui-iconfont aui-icon-comment"></i>{{item.comment}}</div>
          <div><i class="aui-iconfont aui-icon-laud"></i>{{item.laud}}</div>
        </div>
      </div>
    </template>
    <template v-else>
      <section class="aui-middle-dome aui-middle-dome-a" @click="toDetail(item)">
        <template v-if="item.images.length == 1">
          <div class="aui-middle-dome-title">
            <h3>{{item.title}}</h3>
            <div class="aui-middle-dome-text">
              <div class="clearfix">
                <span class="aui-top box-line" v-if="item.is_top">置顶</span>
                <span class="aui-title">{{item.author}}</span>
                <span class="aui-comment">评论 {{item.comment}}</span>
              </div>
            </div>
          </div>
          <div class="aui-middle-dome-img">
             <img v-for="img in item.images" :src="img" v-lazy="img" :key="img">
          </div>
        </template>
        <template v-else>
          <div class="aui-middle-dome-list-box aui-middle-dome-a" @click="toDetail(item)">
            <h3>
             {{item.title}}
            </h3>
            <div class="aui-middle-dome-list">
              <ul class="clearfix">

                <li v-for="img in item.images" :key="img">
                   <img  :src="img" v-lazy="img" :key="img">
                </li>
              
              </ul>
            </div>
            <div class="aui-middle-dome-text">
              <div class="clearfix">
                <span class="aui-title">{{item.author}}</span>
                <span class="aui-title">评论 {{item.comment}}</span>
              </div>
            </div>
          </div>
        </template>
      </section>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  methods:{
    toDetail(item){
      // console.log('item--',item)
      this.$router.push('/detail/'+item.id);
    }
  }
};
</script>

<style>
</style>